{% extends "base.html" %}

{% block title %}权限管理器{% endblock %}

{% block heard %}权限管理器{% endblock %}

{% block content %}
  <!--  常用按钮  -->
    <div class="layui-row">
        <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius button" flg="power_list">
          列表 <i class="layui-icon layui-icon-list"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius button" flg="add_power">
          权限 <i class="layui-icon layui-icon-add-circle-fine"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius button" flg="add_user">
          用户 <i class="layui-icon layui-icon-add-circle-fine"></i>
        </button>
    </div>

    <div class="layui-bg-gray layui-bg-black" style="padding: 16px;">
      <div class="layui-collapse">
          {% for item in users %}
              <div class="layui-colla-item">
                <div class="layui-colla-title">{{ item.username }}</div>
                <div class="layui-colla-content">
                  <div class="layui-btn-group">
                      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm button" lay-data="{{ item.id }}" flg="update">
                          修改<i class="layui-icon layui-icon-edit"></i>
                      </button>
                  </div>
                  <div class="layui-btn-group">
                      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm button" lay-data="{{ item.id }}" flg="delete">
                          删除<i class="layui-icon layui-icon-delete"></i>
                      </button>
                  </div>
                </div>
              </div>
          {% endfor %}
        </div>
    </div>
{% endblock %}

{% block js_content %}
<script>
    layui.define(function(exports){
        // 输出接口
        exports('common', {
            run_start: function () {
                // 点击事件
              $(".button").on("click", function (){
                    let tag = $(this).attr("flg");
                    let id = $(this).attr("lay-data");
                    switch (tag) {
                        case 'power_list':
                            layer.open({
                                type: 2,
                                title: '权限列表',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['90%', '90%'],
                                content: "/power/list",
                                cancel:function (){
                                    layer.closeAll();
                                }
                            });
                            break;
                        case 'update':
                            layer.open({
                                type: 2,
                                title: '修改权限',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['90%', '90%'],
                                content: "/power/userUpdate?id="+id,
                                cancel:function (){
                                    layer.closeAll();
                                }
                            });
                            break;
                        case "add_power":
                             layer.open({
                                type: 2,
                                title: '添加权限',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['90%', '90%'],
                                content: "/power/add",
                                cancel:function (){
                                    layer.closeAll();
                                }
                            });
                            break;
                        case "add_user":
                             layer.open({
                                type: 2,
                                title: '添加用户',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['90%', '90%'],
                                content: "/power/userUpdate?id=0",
                                cancel:function (){
                                    layer.closeAll();
                                }
                            });
                            break;
                        case "delete":
                            layer.confirm('确定删除该用户？', {
                                btn: ['确定', '取消'] //按钮
                            }, function(){
                                $.ajax({
                                    url: "/power/delete",
                                    type: "POST",
                                    data: JSON.stringify({
                                        "id": id
                                    }),
                                    dataType: "json",
                                    success: function (response) {
                                        layer.msg(response.data);
                                        location.reload();
                                   }
                               });
                           });
                            break;
                    }
              });
            }
        });
    });
</script>
{% endblock %}
